<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>猜拳</title>
</head>
<style>
    img {
        width: 100px;
        margin-right: 10px;
    }
    img:hover {
        cursor: pointer;
    }
    .left {
        float: left;
        padding: 10px;
        vertical-align: middle;
    }
    h3 {
        vertical-align: middle;
    }
    .clearfix::after {
        content: "";
        clear: both;
        display: block;
    }
    .inner {
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .you,.com {
        margin-right: 20px;
        margin-left: 20px;
    }
    .result {
        font-size: 30px;
        margin-top: 20px;
        color: #000;
    }
</style>

<body>
    <div class="box">
        <img src="./images/0.png" alt="" onclick="me(0)">
        <img src="./images/1.png" alt="" onclick="me(1)">
        <img src="./images/2.png" alt="" onclick="me(2)">
    </div>
    <div class="inner ">
        <div class="you ">
            <h2></h2>
            <img src="" alt="">
        </div>
        <div class="">
            <h3></h3>
        </div>
        <div class="com ">
            <h2></h2>
            <img src="" alt="">
        </div>
    </div>
    <div class="result"></div>
    <script>
        const me=(index)=>{
            const data = document.getElementsByClassName('you')[0].children[0];
            data.innerHTML = `你出的是:`;
            document.getElementsByClassName('you')[0].children[1].src = `./images/${index}.png`;
            const com = Math.floor(Math.random() * 3);  
            const data2 = document.getElementsByClassName('com')[0].children[0];
            data2.innerHTML = `人机出的是:`;
            const comData = document.getElementsByClassName('com')[0].children[1];
            comData.src = `./images/${com}.png`;
            const text = document.getElementsByTagName('h3')[0];
            text.innerHTML = `VS`;
            const data3 = document.getElementsByClassName('result')[0]
            if(index == com) {
                data3.innerHTML='平局';
            } else if((index == 0 && com == 2) || (index == 1 && com == 0) || (index == 2 && com == 1)) {
                data3.innerHTML='你赢了'
            } else {
               data3.innerHTML='你输了'
            }
        }
    </script>
</body>

</html>